<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>爱家-注册</title>
    <link href="/static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/css/reset.css" rel="stylesheet">
    <link href="/static/css/ihome/main.css" rel="stylesheet">
    <link href="/static/css/ihome/register.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="logo-bar"><a href="/"><img src="/static/images/logo@128x59.png"></a></div>
        <form class="form-register">
            <div class="form-group form-group-lg">
                <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-mobile fa-2x fa-fw"></i></div>
                    <input type="number" class="form-control" name="mobile" id="mobile" placeholder="手机号" required>
                </div>
            </div>
            <div class="error-msg" id="mobile-err"><i class="fa fa-exclamation-circle"></i><span></span></div>
            <div class="form-group form-group-lg">
                <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-image fa-lg fa-fw"></i></div>
                    <input type="text" class="form-control" name="imagecode" id="imagecode" placeholder="图片验证码"
                        required>
                    <div class="input-group-addon image-code" onclick="generateImageCode();"><img src=""></div>
                </div>
            </div>
            <div class="error-msg" id="image-code-err"><i class="fa fa-exclamation-circle"></i><span></span></div>
            <div class="form-group form-group-lg">
                <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-envelope-o fa-lg fa-fw"></i></div>
                    <input type="text" class="form-control" name="phonecode" id="phonecode" placeholder="短信验证码"
                        required>
                    <div class="phonecode input-group-addon">
                        <a class="phonecode-a" href="javascript:;" onclick="sendSMSCode();">获取验证码</a>
                    </div>
                </div>
            </div>
            <div class="error-msg" id="phone-code-err"><i class="fa fa-exclamation-circle"></i><span></span></div>
            <div class="form-group form-group-lg">
                <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-lock fa-lg fa-fw"></i></div>
                    <input type="password" class="form-control" name="password" id="password" placeholder="密码" required>
                </div>
            </div>
            <div class="error-msg" id="password-err"><i class="fa fa-exclamation-circle"></i><span></span></div>
            <div class="form-group form-group-lg">
                <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-lock fa-lg fa-fw"></i></div>
                    <input type="password" class="form-control" name="password2" id="password2" placeholder="确认密码"
                        required>
                </div>
            </div>
            <div class="error-msg" id="password2-err"><i class="fa fa-exclamation-circle"></i><span></span></div>
            <button type="submit" class="btn btn-lg btn-theme btn-block">立即注册</button>
            <p class="login-a">已有账号，<a href="/login.html">立即登陆</a></p>
        </form>
    </div>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script>
        function getCookie(name) {
            var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
            return r ? r[1] : undefined;
        }

        var imageCodeId = "";

        function generateUUID() {
            var d = new Date().getTime();
            if (window.performance && typeof window.performance.now === "function") {
                d += performance.now(); //use high-precision timer if available
            }
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        }

        function generateImageCode() {
            // 形成图片验证码的后端地址， 设置到页面中，让浏览请求验证码图片
            // 1. 生成图片验证码编号
            imageCodeId = generateUUID();
            // 是指图片url
            var url = "/api/v1/captcha/" + imageCodeId;
            $(".image-code img").attr("src", url);
        }

        function sendSMSCode() {
            $(".phonecode-a").removeAttr("onclick");
            var mobile = $("#mobile").val();
            if (!mobile) {
                $("#mobile-err span").html("请填写正确的手机号！");
                $("#mobile-err").show();
                $(".phonecode-a").attr("onclick", "sendSMSCode();");
                return;
            }
            var imageCode = $("#imagecode").val();
            if (!imageCode) {
                $("#image-code-err span").html("请填写验证码！");
                $("#image-code-err").show();
                $(".phonecode-a").attr("onclick", "sendSMSCode();");
                return;
            }
            $.get("/api/v1/sendsms/"+ mobile, {code: imageCode, codeId: imageCodeId },
                function (data) {
                    if (0 != data.errno) {
                        $("#image-code-err span").html(data.errmsg);
                        $("#image-code-err").show();
                        if (2 == data.errno || 3 == data.errno) {
                            generateImageCode();
                        }
                        $(".phonecode-a").attr("onclick", "sendSMSCode();");
                    }
                    else {
                        var $time = $(".phonecode-a");
                        var duration = 60;
                        var intervalid = setInterval(function () {
                            $time.html(duration + "秒");
                            if (duration === 1) {
                                clearInterval(intervalid);
                                $time.html('获取验证码');
                                $(".phonecode-a").attr("onclick", "sendSMSCode();");
                            }
                            duration = duration - 1;
                        }, 1000, 60);
                    }
                }, 'json');
        }

        $(document).ready(function () {
            generateImageCode();
            $("#mobile").focus(function () {
                $("#mobile-err").hide();
            });
            $("#imagecode").focus(function () {
                $("#image-code-err").hide();
            });
            $("#phonecode").focus(function () {
                $("#phone-code-err").hide();
            });
            $("#password").focus(function () {
                $("#password-err").hide();
                $("#password2-err").hide();
            });
            $("#password2").focus(function () {
                $("#password2-err").hide();
            });
            $(".form-register").submit(function (e) {
                e.preventDefault();
                mobile = $("#mobile").val();
                phoneCode = $("#phonecode").val();
                passwd = $("#password").val();
                passwd2 = $("#password2").val();
                if (!mobile) {
                    $("#mobile-err span").html("请填写正确的手机号！");
                    $("#mobile-err").show();
                    return;
                }
                if (!phoneCode) {
                    $("#phone-code-err span").html("请填写短信验证码！");
                    $("#phone-code-err").show();
                    return;
                }
                if (!passwd) {
                    $("#password-err span").html("请填写密码!");
                    $("#password-err").show();
                    return;
                }
                if (passwd != passwd2) {
                    $("#password2-err span").html("两次密码不一致!");
                    $("#password2-err").show();
                    return;
                }
                 // 调用ajax向后端发送注册请求
                var req_data = {
                    mobile: mobile,
                    sms_code: phoneCode,
                    password: passwd,
                    password2: passwd2,
                };
                var req_json = JSON.stringify(req_data);
                $.ajax({
                    url: "/api/v1/register",
                    type: "post",
                    data: req_json,
                    contentType: "application/json",
                    dataType: "json",
                    headers: {
                        "X-CSRFToken": getCookie("csrf_token")
                    }, // 请求头，将csrf_token值放到请求中，方便后端csrf进行验证
                    success: function (resp) {
                        if (resp.errno == "0") {
                            // 注册成功，跳转到主页
                            location.href = "/index.html";
                        } else {
                            alert(resp.errmsg);
                        }
                    }
                })
            });
        })
    </script>
</body>

</html>